<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="https:d3js.org/d3.v6.min.js"></script>
</head>
<body>
	<script>
	//线性比例尺，能将一个连续的区间，映射到另一区间。要解决柱形图宽度的问题，就需要线性比例尺。
	//假设有以下数组：
	var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
	//将最小的值映射成0，最大的值映射成300
	var min = d3.min(dataset);
var max = d3.max(dataset);

var linear = d3.scaleLinear()
        .domain([min, max])
        .range([0, 300]);
	console.log(linear(0.9))//0
	console.log(linear(2.3))//175
	console.log(linear(3.3))//300
	//其中，d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域。在这里还用到了两个函数，它们经常与比例尺一起出现：
	
	//有时候，定义域和值域不一定是连续的。例如，有两个数组：
	
	var index = [0, 1, 2, 3, 4];
	var color = ["red", "blue", "green", "yellow", "black"];
	//我们希望 0 对应颜色 red，1 对应 blue，依次类推。
	//但是，这些值都是离散的，线性比例尺不适合，需要用到序数比例尺。
	var ordinal = d3.scaleOrdinal()
        .domain(index)
        .range(color);

	//给柱形图添加比例尺
//在上一章的基础上，修改一下数组，再定义一个线性比例尺。

var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];

var linear = d3.scaleLinear()
        .domain([0, d3.max(dataset)])
        .range([0, 250]);
//其后，按照上一章的方法添加矩形，在给矩形设置宽度的时候，应用比例尺。

var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

var svg = d3.select('body').append('svg')

svg.selectAll("rect")
    .data(dataset)
    .join('rect')
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return linear(d);   //在这里用比例尺
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");
//如此一来，所有的数值，都按照同一个线性比例尺的关系来计算宽度，因此数值之间的大小关系不变。
</script>

</body>
</html>
